<template>
    <div class="tem-chart-wrapper">
        <div style="margin-bottom: -20px">
            <el-tag type="success">下层溶解氧曲线</el-tag>
        </div>
        <div style="width: 350px;height: 300px" id="mainn"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: "ox",
        data() {
            return {
                minNumber:'',
                maxNumber:'',
                radio: '1'
            }
        },
        mounted() {
            this.echartsInit()
        },
        methods:{
            echartsInit() {
                echarts.init(document.getElementById('mainn')).setOption({
                    xAxis: {
                        type: 'category',
                        name:'days',
                        axisLabel:{
                            formatter:'{value}'
                        },
                        data: this.$store.state.timeInfor,
                        axisLine:{
                            lineStyle:{
                                color:'#33cea0'
                            }
                        },
                    },
                    yAxis: {
                        // scale:true,
                        // interval:0.4,
                        type: 'value',
                        name:'百分比',
                        axisLabel:{
                            formatter:'{value}%'
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#33cea0'
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        splitLine:{
                            show:false
                        }
                    },
                    series: [{
                        hoverAnimation: true, //是否开启 hover 在拐点标志上的提示动画效果
                        data: this.$store.state.oxArr,
                        type: 'line',
                        smooth: true,
                        itemStyle : { normal: {
                                label : {show: true,color:'#c5b032'}

                            }},
                    }],
                    color:'#c5b032',
                    textStyle:{
                        color:'#33cea0'
                    }
                },true)
            }
        }
    }
</script>

<style scoped lang="less">
    #main{

    }

</style>
